<template>
  <div class="body_bgi full bgs_full">
    <big-screen-header headerName="牲畜基本信息" />

    <div class="content_box w_full h_full-100 flex_row_between p_10">
      <!-- 1 -->
      <div class="w_25_p h_full flex_column_between chart_box_bgi_1 border_radius_10">

        <!-- 当前羊 -->
        <div class="w_full h_50_p p_10">
          <div class="flex_row_between">
            <div class="h_30 lh_30 main_color fw_bold fs_16 mb_10 ls_2 flex_row_start flex_center fw_bold">
              <div class="w_1 h_15 main_bgc main_border mr_10"></div>当前羊基本信息
            </div>

            <div class="main_color fs_14">羊编号：{{ breedingInfo.id }}</div>
          </div>
          
          <div class="w_full h_full-30">
            <div class="w_full main_color fs_20 fw_bold">RFID: {{ breedingInfo.rfid }}</div>
            <!-- <div class="w_full color_fff">{{ breedingInfo.farmName }}</div> -->
            <!-- <div class="w_full color_fff" v-if="muhuName != null && muhuName != 'null'">养殖户: {{ muhuName }}</div> -->

            <div class="w_full h_full-100 flex_row_start color_fff mt_10" v-if="breedingInfo.height">
              <div class="w_50_p h_full ph_5">
                <div class="full y_scroll overflow_y_auto bgc_1a396b78 border_radius_10 p_10">
                  <div class="w_full flex_row_between"><div class="color_fff">身高:</div><div class="color_fff">{{ breedingInfo.height }} cm</div></div>
                  <div class="w_full flex_row_between"><div class="color_fff">体长:</div><div class="color_fff">{{ breedingInfo.tiLength }} cm</div> </div>
                  <div class="w_full flex_row_between"><div class="color_fff">等级:</div><div class="color_fff">{{ formatLevel(breedingInfo.leaveType) }}</div></div>
                  <div class="w_full flex_row_between"><div class="color_fff">胸围:</div><div class="color_fff">{{ breedingInfo.chest }} cm</div></div>
                  <div class="w_full flex_row_between"><div class="color_fff">产毛量:</div><div class="color_fff">{{ breedingInfo.maoCount }}</div></div>
                  <div class="w_full flex_row_between"><div class="color_fff">净重:</div><div class="color_fff">{{ breedingInfo.netWeight }} kg</div></div>
                </div>
              </div>
              <div class="w_50_p h_full ph_5">
                <div class="full y_scroll overflow_y_auto bgc_1a396b78 border_radius_10 p_10">
                  <div class="w_full flex_row_between"><div class="color_fff">头毛:</div><div class="color_fff">{{ breedingInfo.touMao }}</div></div>
                  <div class="w_full flex_row_between"><div class="color_fff">类型与皱褶:</div><div class="color_fff">{{ breedingInfo.wrinkling }}</div></div>
                  <div class="w_full flex_row_between"><div class="color_fff">毛长度:</div><div class="color_fff">{{ breedingInfo.maoLength }}</div></div>
                  <div class="w_full flex_row_between"><div class="color_fff">密度:</div><div class="color_fff">{{ breedingInfo.density }} </div></div>
                  <div class="w_full flex_row_between"><div class="color_fff">弯曲度:</div><div class="color_fff">{{ breedingInfo.wanQu }}</div></div>
                  <div class="w_full flex_row_between"><div class="color_fff">细度:</div><div class="color_fff">{{ breedingInfo.xiDu }}</div></div>
                  <div class="w_full flex_row_between"><div class="color_fff">油汗:</div><div class="color_fff">{{ breedingInfo.oilSweat }}</div></div>
                  <div class="w_full flex_row_between"><div class="color_fff">均匀度:</div><div class="color_fff">{{ breedingInfo.uniformity }}</div></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 选中 羊 -->
        <div class="w_full h_50_p p_10 relative border_t_1_s_ccc">
          <div class="flex_row_between">
            <div class="h_30 lh_30 main_color fw_bold fs_16 mb_10 ls_2 flex_row_start flex_center fw_bold">
              <div class="w_1 h_15 main_bgc main_border mr_10"></div>祖先羊基本信息
            </div>

            <div class="main_color fs_14" v-if="breedingInfo2.id">羊编号：{{ breedingInfo2.id }}</div>
          </div>

          <div class="w_full h_full-30 mt_10" v-if="isShowBox3">
            <dv-loading v-if="isShowBox3Loading" class="color_fff">数据加载中...</dv-loading>
            
            <!-- 基本信息 -->
            <div class="w_90_p h_full m_0_auto color_fff" v-if="!isShowBox3Loading">
              <div class="full">
                <div class="w_full main_color fs_20 fw_bold">RFID: {{ breedingInfo2.rfid }}</div>
                <!-- <div class="w_full color_fff">种羊场: {{ breedingInfo2.farmName }}</div> -->
                <!-- <div class="w_full color_fff" v-if="muhuName != null && muhuName != 'null'">养殖户: {{ muhuName }}</div> -->

                <div class="w_full h_full-100 flex_row_start color_fff mt_10">
                  <div class="w_50_p h_full ph_5">
                    <div class="h_full overflow_y_auto y_scroll bgc_1a396b78 border_radius_10 p_10 ">
                      <div class="w_full flex_row_between"><div class="color_fff">身高:</div><div class="color_fff">{{ breedingInfo2.height }} cm</div></div>
                      <div class="w_full flex_row_between"><div class="color_fff">体长:</div><div class="color_fff">{{ breedingInfo2.tiLength }} cm</div> </div>
                      <div class="w_full flex_row_between"><div class="color_fff">等级:</div><div class="color_fff">{{ formatLevel(breedingInfo2.leaveType) }}</div></div>
                      <div class="w_full flex_row_between"><div class="color_fff">胸围:</div><div class="color_fff">{{ breedingInfo2.chest }} cm</div></div>
                      <div class="w_full flex_row_between"><div class="color_fff">产毛量:</div><div class="color_fff">{{ breedingInfo2.maoCount }}</div></div>
                      <div class="w_full flex_row_between"><div class="color_fff">净重:</div><div class="color_fff">{{ breedingInfo2.netWeight }} kg</div></div>
                    </div>
                  </div>
                  <div class="w_50_p h_full ph_5">
                    <div class="h_full overflow_y_auto y_scroll bgc_1a396b78 border_radius_10 p_10">
                      <div class="w_full flex_row_between"><div class="color_fff">头毛:</div><div class="color_fff">{{ breedingInfo.touMao }}</div></div>
                      <div class="w_full flex_row_between"><div class="color_fff">类型与皱褶:</div><div class="color_fff">{{ breedingInfo2.wrinkling }}</div></div>
                      <div class="w_full flex_row_between"><div class="color_fff">毛长度:</div><div class="color_fff">{{ breedingInfo2.maoLength }}</div></div>
                      <div class="w_full flex_row_between"><div class="color_fff">密度:</div><div class="color_fff">{{ breedingInfo2.density }} </div></div>
                      <div class="w_full flex_row_between"><div class="color_fff">弯曲度:</div><div class="color_fff">{{ breedingInfo2.wanQu }}</div></div>
                      <div class="w_full flex_row_between"><div class="color_fff">细度:</div><div class="color_fff">{{ breedingInfo2.xiDu }}</div></div>
                      <div class="w_full flex_row_between"><div class="color_fff">油汗:</div><div class="color_fff">{{ breedingInfo2.oilSweat }}</div></div>
                      <div class="w_full flex_row_between"><div class="color_fff">均匀度:</div><div class="color_fff">{{ breedingInfo2.uniformity }}</div></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 谱系牲畜详情 -->
          <div v-else class="absolute_center color_fff ls_2">
            <!-- 点击节点查看详情 -->
          </div>
        </div>
      </div> 

      <!-- 2 -->
      <div class="w_75_p h_full pl_10">
        <!-- 谱系档案 -->
        <div class="full border_radius_10 chart_box_bgi_1">
          <sheep-tree :chartData="chartData" @clickSheep="clickSheep" />
        </div>
      </div> 
    </div>
  </div>
</template>

<script>
  import defMixin from '@/mixins/def.js'
  import componentsMixin from '@/mixins/components.js'
  import imgMixin from '@/mixins/def-img.js'

  import { 
    getCattleInfo, 
    getCattleGrowthLogList,
    getVaccinumRecordList,
    getTreatList,
    getSheepPedigree
  } from '@/api/sheep/index.js'
  import { filePath } from "@/const"

  export default {
    name: 'SheepDetail',
    mixins: [defMixin, componentsMixin, imgMixin],
    data() {
      return {
        
        sheep_id: '',  // 7470
        rfid: '',      // 30827
        muhuName: null,

        isShowBox3: false,
        isShowBox3Loading: false,
        
        breedingInfo: {
          fileList: []
        },
        breedingInfo2: {
          fileList: []
        },
        breedingInfo3: {
          breedTotalCount:0,
          chest:"88",
          density:"M",
          farmName:"青青草原农牧业开发有限公司",
          fileList:Array[0],
          height:"63",
          hornName:"无",
          hornType:"nothing",
          id:37,
          imgList:null,
          leaveType:"0",
          maoCount:"0",
          maoLength:11,
          netWeight:0,
          oilSweat:"H",
          tiLength:"72",
          touMao:"T",
          uniformity:"Y",
          wanQu:"W",
          weight: 49.8,
          wrinkling:"L",
          xiDu:"68",

        },

        chartData: {},

        growIndex: 0,
        
      }
    },
    mounted() {
      let sheep_id = this.$route.params.sheep_id
      let rfid = this.$route.params.rfid
      let muhuName = this.$route.params.muhuName
      
      this.sheep_id = sheep_id
      this.rfid = rfid
      this.muhuName = muhuName
     
      // 获取 羊的 养殖档案详情
      this.getCattleInfo(rfid)

      // 获取 羊的 谱系档案
      // this.getSheepPedigree(7010)
      this.getSheepPedigree(sheep_id)

      // 获取 羊的 成长记录
      // await this.getCattleGrowthLogList(rfid)

      // // 获取 羊的 防疫记录
      // await this.getVaccinumRecordList(rfid)

      // // 获取 羊的 治疗记录
      // await this.getTreatList(rfid)

      // this.initChartData()
     
    },
    methods: {
      initChartData() {
        let nodes = [
          { id: '1', label: '羊1', img: "https://tse1-mm.cn.bing.net/th/id/OIP-C.waGKLA51c8l-48tId7puNQHaE7?w=247&h=180&c=7&r=0&o=5&pid=1.7" },
          { id: '2', label: '羊2', img: "https://p1.ssl.qhimg.com/t01f684aa47def1d519.jpg" },
          { id: '3', label: '羊3', img: "https://tse2-mm.cn.bing.net/th/id/OIP-C.PX_gPQQ1ej7ZvsB4Qm7ymgHaFj?w=213&h=180&c=7&r=0&o=5&pid=1.7" },
          { id: '4', label: '羊4', img: "https://tse1-mm.cn.bing.net/th/id/OIP-C.PIbdUmcA9S9Db4FOtExiWQHaFj?w=238&h=180&c=7&r=0&o=5&pid=1.7" },
          { id: '5', label: '羊5', img: "https://tse2-mm.cn.bing.net/th/id/OIP-C.C_Wle-kKSSiYhmqqSOk8twHaEy?w=277&h=180&c=7&r=0&o=5&pid=1.7" },
          { id: '6', label: '羊6', img: "https://tse2-mm.cn.bing.net/th/id/OIP-C.IjGuLUZZMApsj8wvqLkDDwHaFY?w=226&h=180&c=7&r=0&o=5&pid=1.7" },
          { id: '7', label: '羊7', img: "https://tse4-mm.cn.bing.net/th/id/OIP-C.HD_dIdhcL5ROxsia0cDYgAHaFd?w=270&h=198&c=7&r=0&o=5&pid=1.7" },
          { id: '8', label: '羊8', img: "https://tse3-mm.cn.bing.net/th/id/OIP-C.zv7rSRAhHVmwRWillc-T1wHaES?w=321&h=186&c=7&r=0&o=5&pid=1.7" },
          { id: '9', label: '羊9', img: "https://tse2-mm.cn.bing.net/th/id/OIP-C.WFm1x5sLpLD7uJLf7XDgSwHaEL?w=281&h=180&c=7&r=0&o=5&pid=1.7" },
          { id: '10', label: '羊10', img: "https://pic.baike.soso.com/p/20140625/20140625144104-1624465006.jpg" },
          { id: '11', label: '羊11', img: "https://tse3-mm.cn.bing.net/th/id/OIP-C.5Oj0Ic-q354hkzdeSZQ6KwHaFk?w=189&h=180&c=7&r=0&o=5&pid=1.7" },
        ]
        // 连接点集合
        let edges = [
          { source: '1', target: '2', label: '父亲' },
          { source: '1', target: '3', label: '母亲' },
          { source: '2', target: '4', label: '爷爷' },
          { source: '2', target: '5', label: '奶奶' },
          { source: '3', target: '6', label: '姥爷' },
          { source: '3', target: '7', label: '姥姥' },
          { source: '5', target: '8', label: 'xx' },
          { source: '5', target: '9', label: 'xx' },
          { source: '7', target: '10', label: 'xx' },
          { source: '7', target: '11', label: 'xx' },
        ]

        this.chartData = {
          nodes,
          edges
        }
      },

      // 获取 羊的 养殖档案详情
      async getCattleInfo(rfid) {
        this.chartData = {}
        let res = await getCattleInfo(rfid)
        // debugger
        try {
          if (res.code == 200) {
            this.breedingInfo = res.data
          }
        } catch(err) {
          console.log('获取羊的养殖档案详情失败 : ', err)
        }
      },

      // 获取 羊的 谱系档案
      async getSheepPedigree(sheep_id) {
        let res = await getSheepPedigree(sheep_id)
        try {
          if (res.code == 200) {
            let nodes = []
            let edges = []
            let groups = []

            for (let i in res.data.graph.nodes) {
              nodes.push({ 
                id: res.data.graph.nodes[i].id.toString(), 
                // label: this.relationMap[res.data.nodes[i].labels[0]], 
                label: `羊编号: ${res.data.graph.nodes[i].props.cattleId}`,
                props: res.data.graph.nodes[i].props, 
                // img: res.data.graph.nodes[i].props.imgList && res.data.graph.nodes[i].props.imgList.length 
                // ?  filePath + res.data.graph.nodes[i].props.imgList[0] : 'https://ts1.cn.mm.bing.net/th/id/R-C.0b97d47208b2b4003d43d96ca6882dae?rik=demLMuWG0ke7jA&riu=http%3a%2f%2fpic.616pic.com%2fys_img%2f00%2f42%2f63%2fd2CidQ1QH9.jpg&ehk=mTxRWP8t5C1vnAE7Im6CRBMYHW3yoZaTJzWKzRR33oE%3d&risl=&pid=ImgRaw&r=0'
                img: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.7skvAoD2D87ajKk8tMoK3AAAAA?w=177&h=180&c=7&r=0&o=5&pid=1.7',
                type: 'rect-jsx',
                color: res.data.graph.nodes[i].props.sex == 0 ? '#2196f3' : '#f07c7c',
                sex: res.data.graph.nodes[i].props.sex == 0 ? '公' : '母',
                disc: this.formatDisc(res.data.graph.nodes[i])
              })
            }

            for (let j in res.data.graph.edges) {
              edges.push({ 
                source: res.data.graph.edges[j].dstId.toString(), 
                target: res.data.graph.edges[j].srcId.toString(), 
                // label: this.relationMap[res.data.graph.edges[j].label],
                style: {
                  startArrow: true
                },
                props: res.data.graph.edges[j].props
              })
            }

            this.chartData = {
              nodes,
              edges,
              groups
            }

            console.log('this.chartData : ', this.chartData);
          }
        } catch(err) {
          console.log('获取羊的谱系档案失败 : ', err)
        }
      },

      // 监听点击 谱系档案的节点
      async clickSheep(params) {
        this.isShowBox3 = true
        this.isShowBox3Loading = true
        // 获取 被点击的 羊的 数据
        let res = await getCattleInfo(params.rfid)
        try {
          if (res.code == 200) {
            setTimeout(() => { 
              this.breedingInfo2 = res.data 
              this.isShowBox3Loading = false
            }, 500)
          }
        } catch(err) {
          console.log('获取羊的养殖档案详情失败 : ', err)
        }
      },

      // 获取 羊的 成长记录
      async getCattleGrowthLogList(rfid) {
        let res = await getCattleGrowthLogList(rfid)
        try {
          if (res.code == 200) {
            // this.breedingInfo = res.data
          }
        } catch(err) {
          console.log('获取羊的成长记录失败 : ', err)
        }
      },

      // 获取 羊的 防疫记录
      async getVaccinumRecordList(rfid) {
        let res = await getVaccinumRecordList(rfid)
        try {
          if (res.code == 200) {
            // this.breedingInfo = res.data
          }
        } catch(err) {
          console.log('获取羊的防疫记录失败 : ', err)
        }
      },

      // 获取 羊的 治疗记录
      async getTreatList(rfid) {
        let res = await getTreatList(rfid)
        try {
          if (res.code == 200) {
            // this.breedingInfo = res.data
          }
        } catch(err) {
          console.log('获取羊的治疗记录失败 : ', err)
        }
      },

      // 监听 点击 成长记录 tabName 切换成长记录
      changeGrowIndex(index) {
        this.growIndex = index
      },

      formatDisc(node_item) {
        let val = ''
        if (node_item.props.cattleId == this.sheep_id) {
          val = '当前羊'
        // } else if (node_item.props.sex == 0) {
        //   val = '父亲'
        // } else if (node_item.props.sex == 1) {
        //   val = '母亲'
        } else {
          val = ''
        }

        return val
      },

      // 鼠标滚轮控制 成长记录TabName 横向滚动
      wheelScroll(e) {
        let box = this.$refs.tabName
        e.preventDefault()
        box.scrollLeft += e.deltaY
      },

      goToPage(path) {
        this.$router.push(path)
      },
      
    }
  }
</script>

<style scoped>
  /* @import url('../../../@/assets/css/bigscreen.less'); */
</style>
  
<style scoped lang="less">
  .activeColor { color: #2366fc !important; }
  .left_box { 
    height: 33% !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }
  .right_box { 
    height: 33% !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }

  .info_item {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    // color: rgb(13, 246, 94);

    div:nth-child(1) { width: 45%; }
    div:nth-child(2) { width: 55%; }
  }

  .swiper { 
    width: 100%;
    height: 91% !important;
  }

  .yu_zhong_item {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 8px;
    box-sizing: border-box;

    .img_box {
      img { border-radius: 10px; }
    }
  }

  /* 滚动条没有边框 */
  .y_scroll::-webkit-scrollbar {
    width: 2px;
    height: 100%;
    background-color: #888;
  }

  ::-webkit-scrollbar-thumb {                 /*表示纵向滚动块*/
    border-radius: 10px;
    background: #E4CFBB;
  }

  @media screen and (min-width: 1200px) and (max-width: 1399px) {
  }
  @media screen and (min-width: 1400px) and (max-width: 1699px) {
  }
</style>

<style>
.el-carousel__container { height: 100% !important; }
</style>